<template>
    <div class="login" style="background-image: url('/img/loginBK.png')">
      <div class="loginBody">
        <p style="font-size: 23px;margin-bottom: 33px">社区志愿者管理服务平台</p>


        <Vcode :show="isShow" @success="success" @close="close" />

        <a-form
            :model="loginForm"
            name="basic"
            :wrapper-col="{ span: 24 }"
            autocomplete="off"
            @finish="signIn"
        >
          <a-form-item
              name="username"
          >
            <a-input size="large" v-model:value="loginForm.userAccount" placeholder="请输入用户名">
              <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
            </a-input>
          </a-form-item>

          <a-form-item
              name="password"
          >
            <a-input type="password" size="large" v-model:value="loginForm.userPassword" placeholder="请输入密码">
              <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
            </a-input>
          </a-form-item>

          <a-form-item><div style="height: 10px"></div>
            <a-button :disabled="loginForm.userAccount === '' || loginForm.userPassword === '' "
                      :loading="buttonLoading"
                      size="large" style="width: 100%;" type="primary" html-type="submit">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
</template>

<script>
import {h, reactive, toRefs} from "vue";
import {UserOutlined, LockOutlined, SmileOutlined} from '@ant-design/icons-vue';
import {message, notification} from "ant-design-vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {loginVol} from "@/utils/user";
import Vcode from 'vue3-puzzle-vcode'

export default {
  components: {
    UserOutlined,
    LockOutlined,
    SmileOutlined,
    Vcode,
  },
  setup(){
    const state = reactive({
      loginForm: {
        userAccount: '',
        userPassword: '',
        code: '',
      },
      user: {},
      buttonLoading: false,
      isShow: false,
    })

    const router = useRouter()
    const store = useStore();

    const success = function (){
      state.isShow = false
      state.buttonLoading = true
      loginVol(state.loginForm).then(res => {
        console.log(res)
        if (res.data.code === 0){
          state.user = res.data.data
          console.log(res.data.data)
          state.buttonLoading = false

          store.commit("setUserAccount",{value: state.user.userAccount})
          store.commit("setId",{value: state.user.id})
          store.commit("setUserName",{value: state.user.userName})
          store.commit("setUserAvatar",{value: state.user.userAvatar})
          store.commit("setUserRole",{value: state.user.userRole})
          store.commit("setPhone",{value: state.user.phone})

          message.success('登录成功')
          router.push({name: 'account'})

          setTimeout(()=>{
            notification.open({
              message: '欢迎回来',
              icon: () => h(SmileOutlined, {
                style: 'color: #108ee9',
              }),
            });
          },1200)
        }else{
          state.buttonLoading = false
          message.error('用户名或密码错误')
        }
      })
    }

    const signIn = function (){
      state.isShow = true
    }

    // 用户点击遮罩层，应该关闭模态框
    const  close = function (){
      state.isShow = false;
    }


    return{
      ...toRefs(state),
      signIn,
      success,
      close,
    }
  }
}
</script>

<style scoped>
.login{
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.loginBody{
  height: auto;
  position: absolute;
  left: 83%;
  top: 50%;
  transform: translate(-83%, -50%);
  width: 22%;
  text-align: center;
  background: white;
  padding: 25px 30px 10px 30px;
  border-radius: 12px;
  box-shadow: 0px 5px 15px #999;
}

#canvas {
  float: right;
  margin-right: 1%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 80px;
}

</style>
